<template>
  <div class="home">
    <h1>ts的值类型</h1>
      <h2>布尔类型</h2>
      let a: boolean;<br>
      a = false;<br>
      <h2>数组类型</h2>
      let arr1: number[];<br>
      let arr2: Array {{a}};<br>
      let arr3: (string | number)[];<br>
      <h2>数值类型</h2>
      let num: number;<br>
      num = 1;<br>
      <h2>字符串类型</h2>
      let str: string;<br>
      str = "asda";<br>
      <h2>元组</h2>
      let tuple: [string, number, boolean];<br>
      tuple = ["a", 1, false];<br>
      <h2>枚举类型</h2>
      这里直接点 Roles.super_admin是指值，切枚举类型可以赋值，赋值之后后面的值自动往后排 <br>
      enum Roles { <br>
        super_admin, <br>
        admin = 4, <br>
        user<br>
      }<br>
      <h2>any 类型</h2>
      可以任意复制<br>
      let value: any;<br>
      value = 1;<br>
      value = "aaa";<br>
      value = false;<br>
      const arr4: any[] = [1, "aaa", false]; //使用const必须初始化值<br>
      <h2>void类型</h2>
      const consoleText = (text: string) => {<br>
        console.log(text);<br>
      };<br>
      let v: void;<br>
      v = undefined;<br>
      consoleText("aaa");<br>
      <h2>null 和 undefined</h2>
      let u: undefined;<br>
      let n: null;<br>
      <h2>never 类型</h2>
      // never 类型 永远不纯在的类型  抛错和死循环的时候使用never类型<br>
      <h2>object</h2>
      // object 为内存中的引用<br>
      let obj = {<br>
        name: "dh"<br>
      };<br>
      let obj2 = obj;<br>
      obj2.name = "aaa";<br>
      <h2>类型断言</h2>
       const getLength = (target: string | number): number => {<br>
        if ((target as string).length || (target as string).length === 0) {<br>
          return (target as string).length;<br>
        } else {<br>
          return target.toString().length;<br>
        }<br>
      };<br>
  </div>
</template>

<script lang = "ts">
import func from '../../../../BIM/vue-temp/vue-editor-bridge';
import { parse } from 'url';
import { get } from 'http';
export default {
  name: "tsType",
  data() {
    return {
      a:"<number>"
    };
  },
  created() {
    // this.init();
  },
  methods: {
    type(): void {
      // 布尔类型
      let a: boolean;
      a = false;
      // 数组类型
      let arr1: number[];
      // let b:number[];
      // let c:Array<number>
      // let d:(number|string|boolean)[]
      let arr2: Array<number>;
      let arr3: (string | number)[];
      // 数值类型
      let num: number;
      num = 1;
      // 字符串类型
      let str: string;
      str = "asda";
      // 元组
      let tuple: [string, number, boolean];
      tuple = ["a", 1, false];
      // 枚举类型
      // 这里直接点 Roles.super_admin是指值，切枚举类型可以赋值，赋值之后后面的值自动往后排
      enum Roles {
        super_admin,
        admin = 4,
        user
      }
      // any 类型 可以任意复制
      let value: any;
      value = 1;
      value = "aaa";
      value = false;
      const arr4: any[] = [1, "aaa", false]; //使用const必须初始化值
      // void类型
      const consoleText = (text: string) => {
        console.log(text);
      };
      let v: void;
      v = undefined;
      consoleText("aaa");
      // null 和 undefined  切这两个是其他类型的子类型
      let u: undefined;
      let n: null;
      // never 类型 永远不纯在的类型  抛错和死循环的时候使用never类型

      // object 为内存中的引用
      let obj = {
        name: "dh"
      };
      let obj2 = obj;
      obj2.name = "aaa";
      // 类型断言 as <nubmer>

      const getLength = (target: string | number): number => {
        if ((target as string).length || (target as string).length === 0) {
          return (target as string).length;
        } else {
          return target.toString().length;
        }
      };
    },
    symbol():void{
      let a:Array<number> = [123,153,123,123];
      function c(item:number):boolean{
        return item >= 123;
      }
      a.filter(c)
    },
    interface(){
      interface NameInfo{
        a:string,
        b:number
      }
      let c = ({a,b}:NameInfo):string=>{
        return `${a} ${b}`
      }
      c({a:'hahah',b:111})


      let d = ({firstName,lastName}:{firstName:number,lastName:string}):string=>{
        return `${firstName} ${lastName}`
      }

      d({firstName:1,lastName:'aaa'})
        // 如果需要指定为可选参数的
        interface kexuan {
          color?:string,
          // 只读
          readonly type:string,
          // 索引签名
          [prop:string]:any
        }
        const getVegetables = ({color,type}:kexuan)=>{
          return `${color?(color+''):''}${type}`
        }
        // as 转换
        getVegetables({type:'aaa',color:'aaa',size:2} as kexuan);
        // 数组只读
        interface ArrInter{
          0:number,
         readonly 1:string
        }
        let arr:ArrInter = [1,'aaa']
        // 定义函数的结构
        interface AddFunc{
          (num1:number,num2:number):number
        }
        const add:AddFunc = (n1,n2)=>n1+n2
        add(1,2)
        //定义索引类型
        interface RoleDic{
          [id:string]:number
        }
        const role:RoleDic = {
          aaa:1
        }
        //接口继承
        interface a {
          color:string
        }
        interface b extends a {
          pay:string
        }
        const payApple:b = {
          color:"red",
          pay:'588$'
        }
    },
    Func(){
      // 定义函数类型
      // 接口定义
      interface Func{
        (a:number,b:number):number
      }
      // 类型别名
      type add = (x:number,y:number)=>number;
      let add:(x:number,y:number)=>number
      add= (arg1:number,arg2:number):number=>arg1+arg2
      add = (arg1:number,arg2:number) =>arg1+arg2
      // 可选参数
      type AddFunc = (arg1:number,arg2?:number,args3?:number)=>number
      let addFunction:AddFunc;
      addFunction = (arg1,arg2)=>arg1+arg2
      addFunction(1,2)
      // 函数的重载
      function handleDate(x:string):string
      function handleDate(x:number):number
      function handleDate(x:any):any{
        if(typeof x === 'string'){
          return x.split('')
        }else{
          return x.toString().split('').map((item)=>Number(item))
        }
      }
      handleDate('aaa')
      handleDate(123)
    },
    // 泛型
    T(){
    }
  }
};
</script>
